<template>
<transition name="slide">
  <div class="movie-detail">
    <div class="video-content"></div>
    <div class='not-found' v-if="!movie.coverKey">
      <div>
        <a-icon type="frown"></a-icon>&nbsp;暂无预告，看点别的吧
      </div>
    </div>
    <div class="detail-sidebar">
      <div class="header" @click="back">返回首页</div>
      <div class="movie-detail">
        <tab :nav-list="navList" @switch="switchItem"></tab>
          <div
            class="tab-content"
            :key="0"
            v-show="tabIndex === 0"
          >
            <h1>{{ movie.title }}</h1>
            <dl>
              <dd>豆瓣评分：{{ movie.rate }} 分</dd>
              <dd>电影分类：{{ movie.tags && movie.movieTypes.join(' ') }}</dd>
              <dd>电影标签：{{ movie.tags && movie.tags.join(' ') }}</dd>
              <dd>更新时间：{{ movie.meta && moment(movie.meta.updatedAt).fromNow() }}</dd>
              <dd>创建时间：{{ movie.meta && moment(movie.meta.createdAt).fromNow() }}</dd>
              <dd>上映地区：{{ movie.pubdate && movie.pubdate.map(date => `${date.country}(${moment(date.date).format("YYYY-MM-DD")})`).join('/') }}</dd>
              <dd>电影年份：{{ movie.year }} 年</dd>
              <dt>影片介绍：</dt>
              <dd>{{ movie.summary }}</dd>
            </dl>
          </div>
          <div
            class="tab-content"
            :key="1"
            v-show="tabIndex === 1"
          >
            <ul>
              <li class="item"
                v-for="(item, index) of relativeMovies"
                :key="index"
                @click="toMovieDetail(item)"
              >
                <div class="icon">
                  <img width="60" height="60" v-lazy="`${site}${item.posterKey}`" />
                </div>
                <div class="text">
                  <h2 class="name" v-html="item.title"></h2>
                  <p class="desc">{{ item.pubdate && item.pubdate.map(date => `${date.country}(${moment(date.date).format("YYYY-MM-DD")})`).join('/') }}</p>
                </div>
              </li>
            </ul>
          </div>
      </div>
    </div>
  </div>
</transition>
</template>
<script>
import { getSingleMovie } from '../../utils/api'
import DPlayer from 'dplayer'
import tab from '../home/tab'

import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

export default {
  name: 'movieDetail',
  data () {
    return {
      site: 'http://video.fanchao.site/',
      _id: '',
      dp: null,
      movie: {},
      relativeMovies: [],
      navList: ['关于本片', '同类电影'],
      tabIndex: 0,
      moment: moment
    }
  },
  computed: {
  },
  filters: {
    formateDate (time) {
      return moment(time).fromNow()
    }
  },
  components: {
    tab
  },
  activated () {
    console.log('ac')
  },
  mounted () {
    if (this._id === this.$route.query._id) return
    getSingleMovie({_id: this.$route.query._id}).then(res => {
      this._id = this.$route.query._id
      if (res.success) {
        res = res.data
        this.movie = res.movie
        this.relativeMovies = res.relativeMovies
        this.initVideo(this.movie)
      }
    })
  },
  methods: {
    toMovieDetail ({ _id }) {
      this.dp.pause()
      this.$router.push({ path: '/movieDetail', query: { _id }})
      if (this._id === this.$route.query._id) return
      getSingleMovie({ _id }).then(res => {
        this._id = this.$route.query._id
        if (res.success) {
          res = res.data
          this.movie = res.movie
          this.relativeMovies = res.relativeMovies
          this.initVideo(this.movie)
        }
      })
    },
    back () {
      // this.$router.back()
      this.$router.push('/')
    },
    switchItem ( { item, index } ) {
      this.tabIndex = index
    },
    initVideo (item) {
      this.$nextTick(() => {
        if (!this.movie.coverKey) return
        this.dp = new DPlayer({
          container: document.getElementsByClassName('video-content')[0],
          screenshot: true,
          autoplay:	false,
          loop: false,
          video: {
            url: `${this.site}${item.videoKey}`,
            pic: `${this.site}${item.coverKey}`,
            thumbnails: `${this.site}${item.coverKey}`
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .movie-detail{
    height: calc(100% - 32px);
    display: flex;
    position: relative;
    .not-found {
      position: absolute;
      right: 300px;
      top: 0;
      left: 0;
      bottom: 0;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      z-index: 20;
      background: #f4f7f6;;
      >div{
        width: 400px;
        height: 100%;
        line-height: 100%;
        text-align: center;
        font-size: 30px;
        color: #49c5b6;
        display: flex;
        align-items: center;
      }
    }
    &.slide-enter-active, &.slide-leave-active{
      transition: all .3s;
    }
    &.slide-enter, &.slide-leave-to{
      transform: translate3d(100%, 0, 0)
    }
    >div{
      flex: 1;
      height: 100%;
      &:last-child{
        border-left: 1px solid #ccc;
        flex: 0 0 300px;
      }
    }
    >.detail-sidebar{
      display: flex;
      flex-direction: column;
      >.header{
        background-color: rgba(73, 197, 182, .7);
        color: #fff;
        border-radius: 2px;
        font-size: 20px;
        height: 30px;
        cursor: pointer;
      }
      >.movie-detail{
        display: block;
        >div{
          border: none;
        }
        .tab-content{
          height: calc(100% - 50px);
          overflow-x: hidden;
          padding: 5px 5px 10px 5px;
          color: #49c5b6;
          box-sizing: border-box;
          ul{
            padding: 0;
            margin: 0;
            list-style: none;
          }
          .item{
            display: flex;
            box-sizing: border-box;
            padding: 0 20px 20px 20px;
            align-items: center;
            cursor: pointer;
            >.icon{
              flex: 0 0 60px;
              padding-right: 20px;
            }
            >.text{
              display: flex;
              flex-direction: column;
              flex: 1;
              line-height: 20px;
              overflow: hidden;
              font-size: 14px;
              .name{
                margin-bottom: 10px;
                color: #49c5b6;
                font-size: 16px;
              }
              .desc{
                color: #49c5b6;
              }
            }
          }
          >h1{
            color: #49c5b6;
          }
          dd{
            text-align: left;
            text-indent: 25px;
          }
          &::-webkit-scrollbar {
            position: absolute;
            z-index: 100;
            width: 0px;
            margin-left: -10px;
            -webkit-appearance: none;
          }
          &::-webkit-scrollbar-thumb {
            height: 50px;
            background-color: #E6EAEA;
            background-clip: content-box;
            border-color: transparent;
            border-style: solid;
            border-width: 1px 2px;
            border-radius: 5px;
          }
        }
      }
    }
  }
</style>
